<template>
    <div class="home">
        <van-tabs v-model="active">
            <!-- 首页 -->
            <van-tab title="推荐音乐">
                <Newpage></Newpage>
            </van-tab>
            <van-tab title="排行榜">
                <Ranklist></Ranklist>
            </van-tab>
            <van-tab title="搜索">
                <Searchcircle></Searchcircle>
            </van-tab>
        </van-tabs>
    </div>
</template>


<script>
    //导入
    // @ is an alias to /src
    import Newpage from "./components/Newpage.vue";
    import Ranklist from "./components/Ranklist";
    import Searchcircle from "./components/Searchcircle";

    export default {
        name: "Home",
        // 注册组件
        components: {
            Newpage,
            Ranklist,
            Searchcircle,
        },
        data() {
            return {
                title: "我是一个标题",
                active: 0,
            };
        },
    };
</script>


<style lang="less" >
    .van-tab--active {
        color: rgb(29, 25, 26);
    }

    .van-tabs__line {
        background-color: rgb(202, 15, 59);

    }

    .van-tabbar-item--active {
        color: rgb(202, 15, 37);
    }

    /* 推荐歌单 */
</style>